<template>
	<div>
	  <div class="detail-wrapper">
	    <div class="detali-ifo">
	    	<div class="ifo-line-one">
	    		<div class="name ellipsis-2">
	    			<i class="buy-title-icon"></i>
	    			<span class="tittle">{{DetailBuy.kind_name}}{{DetailBuy.title}}</span>
	    		</div>
	    		<div class="share" @click="shareopen">
	    			<i class="share-icon"></i>
	    			<span>分享</span>
	    		</div>
	    	</div>
	    	<div class="ifo-line-two">
	    		<div class="price">
	    			<span class="p-bt">价格:</span>
	    			<label v-if="DetailBuy.price">
	    				<big>{{DetailBuy.price}}</big>
		    			<span class="unit-price">元/斤</span>
	    			</label>
	    			<label v-else>
	    				<span class="mianyi">面议</span>
		    		</label>
	    		</div>
	    		<div class="size ellipsis">
	    			<span>规格:</span>
	    			<label v-if="DetailBuy.size_unit_name">{{DetailBuy.size_min}}-{{DetailBuy.size_max}}{{DetailBuy.size_unit_name}}</label>
	    			<label v-else>不限</label>
	    		</div>
	    	</div>
	    	<div class="ifo-line-three">
	    		<div class="foods-address ellipsis">
	    			<label>
	    			<i class="address-icon"></i>
						<span>{{DetailBuy.province_name}}</span>
						<span>{{DetailBuy.city_name}}</span>
					</label>
					<label class="wl" v-show="DetailBuy.logistics===1">
						<i class="wl-car"></i>
						<span>物流</span>
					</label>
	    		</div>
	    		<div class="stone ellipsis">
	    			<span>求购:</span>
	    			<label>{{DetailBuy.stock}}斤</label>
	    		</div>
	    	</div>
	    	<div class="ifo-line-four">
	    		<div class="ifo-report" v-show="DetailBuy.report>=0">
	    			<label v-if="!isReport" @click="report">
	    				<i class="report-icon"></i>
	    				<span>举报</span>
	    			</label>
	    			<label class="report-done"  v-else>
	    				<i class="report-icon-done"></i>
	    				<span>已举报</span>
	    			</label>
	    		</div>
	    		<div class="read-time">{{DetailBuy.pv}}次查看</div>
	    		<div class="update-time">{{DetailBuy.updated_view}}</div>
	    	</div>
	    </div>
	    <div class="detali-foods-seller">
	    	<div class="seller-icon">
	    		<img v-if="DetailBuyShop.avatar_view" :src="DetailBuyShop.avatar_view+'?imageView2/2/w/50'"/>
	    	</div>
	    	<div class="seller-msg">
    			<label class="name ellipsis">
					<span v-if="DetailBuyShop.verify_classify" >{{DetailBuyShop.verify_name}}</span>
					<span v-else>{{DetailBuyShop.contact_name}}</span>
				</label>
	    		<span class="verify-type firm-jxs" v-if="DetailBuyShop.verify_classify==2&&DetailBuyShop.verify_type==3"></span>
				<span class="verify-type firm-pfs" v-if="DetailBuyShop.verify_classify==2&&DetailBuyShop.verify_type==13"></span>
				<span class="verify-type own-jxs" v-if="DetailBuyShop.verify_classify==1&&DetailBuyShop.verify_type==3"></span>
				<span class="verify-type own-pfs" v-if="DetailBuyShop.verify_classify==1&&DetailBuyShop.verify_type==13"></span>
				<span class="verify-type own-yf" v-if="DetailBuyShop.verify_classify==1&&DetailBuyShop.verify_type==12"></span>
				<span class="verify-type own-ywy" v-if="DetailBuyShop.verify_classify==1&&DetailBuyShop.verify_type==2"></span>
				<span class="verify-type own-yzh" v-if="DetailBuyShop.verify_classify==1&&DetailBuyShop.verify_type==4"></span>
				<span class="verify-type own-yzj" v-if="DetailBuyShop.verify_classify==1&&DetailBuyShop.verify_type==11"></span>
	    	</div>
	    	<div class="seller-shop">
	    		<router-link :to="{ path: '/trade/shop/'+ DetailBuyShop.id}">
		    		<span class="text">进店铺</span>
		    		<i class="enter-icon"></i>
	    		</router-link>
	    	</div>
	    </div>
	    <div class="detail-tab">
	    	<tab>
		      <tab-item selected @on-item-click="onItemClick">图文详情</tab-item>
		      <tab-item @on-item-click="onItemClick">本店其他供应</tab-item>
		    </tab>
		    <div class="tab-item" v-show="nowIndex===0">
		    	<div class="details-msg">
		    		<div class="main-wapper vux-1px-b">
		    			<div class="msg-left">信息编号</div>
		    			<div class="msg-right">{{DetailBuy.sn}}</div>
		    		</div>
		    	</div>
		    	<div class="details-msg">
		    		<div class="main-wapper vux-1px-b">
		    			<div class="msg-left">求购品种</div>
		    			<div class="msg-right">{{DetailBuy.kind_name}}</div>
		    		</div>
		    	</div>
		    	<div class="details-msg">
		    		<div class="main-wapper vux-1px-b">
		    			<div class="msg-left">求购数量</div>
		    			<div class="msg-right">{{DetailBuy.stock}}斤</div>
		    		</div>
		    	</div>
		    	<div class="details-msg">
		    		<div class="main-wapper vux-1px-b">
		    			<div class="msg-left">规格</div>
		    			<div class="msg-right">{{DetailBuy.size_min}}-{{DetailBuy.size_max}}{{DetailBuy.size_unit_name}}</div>
		    		</div>
		    	</div>
		    	<div class="details-msg">
		    		<div class="main-wapper vux-1px-b">
		    			<div class="msg-left">价格</div>
		    			<div class="msg-right">
		    				<label v-if="DetailBuy.price">{{DetailBuy.price}}元/斤</label>
			    			<label v-else>
			    				<span>面议</span>
				    		</label>
		    			</div>
		    		</div>
		    	</div>
		    	<div class="details-msg">
		    		<div class="main-wapper vux-1px-b">
		    			<div class="msg-left">收货地址</div>
		    			<div class="msg-right">{{DetailBuy.province_name}}{{DetailBuy.city_name}}</div>
		    		</div>
		    	</div>
		    	<div class="details-msg">
		    		<div class="main-wapper vux-1px-b" v-if="DetailBuy.desc_tag!=null&&DetailBuy.desc_tag.length>0 || DetailBuy.desc">
		    			<div class="msg-left">补充说明</div>
		    			<div class="msg-right">
  							<span class="need-bq" v-for="tab in DetailBuy.desc_tag">{{tab}}</span>
  							<label>{{DetailBuy.desc}}</label>
		    			</div>
		    		</div>
		    	</div>
		    	<div class="detail-list-remand" v-show="demandMore.length">
		    		<div class="column vux-1px-b">
		    			<i class="column-icon"></i>
		    			<span>为你推荐</span>
		    		</div>
		    		<div v-if="Detailloading == true" class="load_wrap" >
						<i class="fa fa-spinner fa-pulse"></i>
						数据加载中...
					</div>
					<div class="supply-list-item vux-1px-b" v-for="(data,index) in demandMore" v-else>
						<router-link :to="{ path: '/trade/demand/'+ data.id}">
							<div class="item-img vux-1px" v-if="data.img_view" v-bind:style="{backgroundImage: 'url(' + data.img_view[0]+'?imageView2/2/w/200)'}"><label v-show="data.img.length>1">多图</label></div>
							<div class="item-ifo">
								<div class="ifo-wrap">
									<div class="ifo-wrap-cell">
										<div class="goods-msg clearfix">
											<div class="goods-name ellipsis-2">
												<i class="pre-label" v-show="data.sale_type==2">预售</i>
												<span class="name">{{data.kind_name}}{{data.title}}</span>
											</div>
											<div class="goods-price">
												<div class="pre-date ellipsis" v-if="data.sale_type==2">
													<span class="pre-time ellipsis">{{data.sale_pre.month}}月{{data.sale_pre.day}}上市</span>
												</div>
												<div class="price" v-else>
													<label v-if="data.price_type==2" class="face">面议</label>
													<label v-else><big>{{data.price}}</big>元/{{data.price_unit_name}}</label>
												</div>
											</div>
										</div>
										<div class="goods-from">
											<div class="goods-address ellipsis">
												<i class="address-icon"></i>
												<span>{{data.province_name}}</span>
												<span>{{data.city_name}}</span>
											</div>
											<div class="goods-size">
												<label v-if="data.size_unit_name">
													<span>{{data.size_min}}-{{data.size_max}}{{data.size_unit_name}}</span>
												</label>
												<label v-else>规格不限</label>
											</div>
										</div>
										<div class="goods-seller">
											<div class="seller">
												<label class="name ellipsis">
													<span v-if="data.verify_classify" >{{data.verify_name}}</span>
													<span v-else>{{data.contact_name}}</span>
												</label>
												<span class="verify-type firm-jxs" v-if="data.verify_classify==2&&data.verify_type==3"></span>
												<span class="verify-type firm-pfs" v-if="data.verify_classify==2&&data.verify_type==13"></span>
												<span class="verify-type own-jxs" v-if="data.verify_classify==1&&data.verify_type==3"></span>
												<span class="verify-type own-pfs" v-if="data.verify_classify==1&&data.verify_type==13"></span>
												<span class="verify-type own-yf" v-if="data.verify_classify==1&&data.verify_type==12"></span>
												<span class="verify-type own-ywy" v-if="data.verify_classify==1&&data.verify_type==2"></span>
												<span class="verify-type own-yzh" v-if="data.verify_classify==1&&data.verify_type==4"></span>
												<span class="verify-type own-yzj" v-if="data.verify_classify==1&&data.verify_type==11"></span>
											</div>
											<div class="data ellipsis">{{data.updated_view}}</div>
										</div>
									</div>
								</div>
							</div>
						</router-link>
					</div>
		    	</div>
		    </div>
	    	<div class="tab-item" v-show="nowIndex===1">
	    		<div v-if="Detailloading == true && DetailStatus === 'loading'" class="load_wrap" >
					<i class="fa fa-spinner fa-pulse"></i>
					数据加载中...
				</div>
				<div v-else-if="DetailStatus === 'noData'" class="load_wrap">
					<div class="no-data">暂无数据</div>
				</div>
				<div v-else-if="DetailStatus === 'error'" class="load_wrap error" @click="getloadingdata()">
					<i class="fa fa-frown-o"></i>
					加载失败，点击刷新
				</div>
				<div class="supply-list-item vux-1px-b" v-for="(data,index) in DetailBuyList" v-else>
					<router-link :to="{ path: '/trade/demand/'+ data.id}">
						<div class="item-img vux-1px" v-bind:style="{backgroundImage: 'url(' + data.img_view[0]+'?imageView2/2/w/200)'}"><label v-show="data.img.length>1">多图</label></div>
						<div class="item-ifo">
							<div class="ifo-wrap">
								<div class="ifo-wrap-cell">
									<div class="goods-msg clearfix">
										<div class="goods-name ellipsis-2">
											<i class="pre-label" v-show="data.sale_type==2">预售</i>
											<span class="name">{{data.kind_name}}{{data.title}}</span>
										</div>
										<div class="goods-price">
											<div class="pre-date ellipsis" v-if="data.sale_type==2">
												<span class="pre-time ellipsis">{{data.sale_pre.month}}月{{data.sale_pre.day}}上市</span>
											</div>
											<div class="price" v-else>
												<label v-if="data.price_type==2" class="face">面议</label>
												<label v-else><big>{{data.price}}</big>元/{{data.price_unit_name}}</label>
											</div>
										</div>
									</div>
									<div class="goods-from">
										<div class="goods-address ellipsis">
											<i class="address-icon"></i>
											<span>{{data.province_name}}</span>
											<span>{{data.city_name}}</span>
										</div>
										<div class="goods-size">
											<label <label v-if="data.size_unit_name">
												<span>{{data.size_min}}-{{data.size_max}}{{data.size_unit_name}}</span>
											</label>
											<label v-else>规格不限</label>
										</div>
									</div>
									<div class="goods-seller">
										<div class="seller">
											<label class="name ellipsis">
												<span v-if="data.verify_classify" >{{data.verify_name}}</span>
												<span v-else>{{data.contact_name}}</span>
											</label>
											<span class="verify-type firm-jxs" v-if="data.verify_classify==2&&data.verify_type==3"></span>
											<span class="verify-type firm-pfs" v-if="data.verify_classify==2&&data.verify_type==13"></span>
											<span class="verify-type own-jxs" v-if="data.verify_classify==1&&data.verify_type==3"></span>
											<span class="verify-type own-pfs" v-if="data.verify_classify==1&&data.verify_type==13"></span>
											<span class="verify-type own-yf" v-if="data.verify_classify==1&&data.verify_type==12"></span>
											<span class="verify-type own-ywy" v-if="data.verify_classify==1&&data.verify_type==2"></span>
											<span class="verify-type own-yzh" v-if="data.verify_classify==1&&data.verify_type==4"></span>
											<span class="verify-type own-yzj" v-if="data.verify_classify==1&&data.verify_type==11"></span>
										</div>
										<div class="data ellipsis">{{data.updated_view}}</div>
									</div>
								</div>
							</div>
						</div>
					</router-link>
				</div>
	    	</div>
	    </div>
	  </div>
	<share :shareshow="shareshow" @shareClose="shareClose"></share>
	<loading :show="showLoading" text="数据加载中"></loading>
	<div class="detail-phone vux-1px-t">
	  	<div class="phone" v-show="DetailBuy.status==1">
		  	<div class="care-wrapper">
		  		<label v-if="!isCollection" @click="collection">
		  			<i class="colection-icon"></i>
		  			<span>收藏</span>
		  		</label>
		  		<label v-else @click="deletecollection">
		  			<i class="colection-icon-on"></i>
		  			<span class="colection-origen">已收藏</span>
		  		</label>
		  	</div>
		  	<a class="phone-wrapper" @click="telphonecall">
		  		<i class="phone-icon"></i>
		  		<span>打电话</span>
		  	</a>
	  	</div>
	  	<div class="close-done" v-show="DetailBuy.status==2">已下架</div>
	  	<div class="close-done" v-show="DetailBuy.status==3">已删除</div>
	  	<div class="collection-status" v-show="collectionstatus">{{collectiontext}}</div>
	  </div>
	</div>  
</template>

<script>
import { Tab, TabItem, Loading} from "vux"
import share from '@/components/share/share.vue'
export default {
  data() {
    return {
       nowIndex:0,
       DetailBuy: [],
       DetailBuyShop: [],
       DetailBuyList: [],
       demandMore:[],
       Detailloading:true,
       DetailStatus:"loading",
       demandMoreloading:true,
       shareshow: false,
       isReport:0, //0代表可以举报，1代表不可以举报
       isCollection:0,//0代表未收藏，1代表已收藏,
       showLoading: false,
       collectionstatus:false,
       collectiontext:'',
    }
  },
  methods: {
    onItemClick(index) {
      this.nowIndex = index
    },
    shareopen(){
		this.shareshow = true;
		},
	shareClose() {
		this.shareshow = false;
	},
	report(){
		let data = {id : this.$route.params.id}
		axios.post('/api/trade/demand/reportItem',qs.stringify(data)).then( response=>{
			this.isReport = 1;
			this.collectionstatus=true;
			this.collectiontext="举报成功";
			var t=setTimeout(()=>{this.collectionstatus=false;},1000);
		})
	},
	collection(){
		let data = {id : this.$route.params.id,type : 1}
		axios.post('/api/trade/demand/collectionItem',qs.stringify(data)).then( response=>{
			this.isCollection = 1;
			this.collectionstatus=true;
			this.collectiontext="收藏成功";
			var t=setTimeout(()=>{this.collectionstatus=false;},1000);
		})
	},
	deletecollection(){
	let data = {id : this.$route.params.id,type : 2}
		axios.post('/api/trade/demand/collectionItem',qs.stringify(data)).then( response=>{
			this.isCollection = 0;
			this.collectionstatus=true;
			this.collectiontext="已取消收藏";
			var t=setTimeout(()=>{this.collectionstatus=false;},1000);
		})	
	},
	telphonecall(){
		let data = {id : this.$route.params.id};
		axios.post('/api/trade/demand/dialItem',qs.stringify(data)).then( response=>{
			location.href = 'tel:' + this.DetailBuy.contact_mobile
		})	
	},
    getloadingdata() {
      window.location.reload()
    },
    getData() {
    	this.showLoading = true
    	axios.get('/api/trade/demand/getDetail',{
		params: {
			id: this.$route.params.id
		}
		}).then(response => {
			this.DetailBuy = response.data.resp_data;
			this.isReport = this.DetailBuy.report;
			this.isCollection = this.DetailBuy.collection;
			this.showLoading = false
			
		});
		axios.get('/api/trade/demand/getDetailSub',{
			params: {
				id: this.$route.params.id
			}
		}).then(response => {
			this.DetailBuyShop = response.data.resp_data.shop;
			this.DetailBuyList = response.data.resp_data.dataList;
			// if(!response.data.resp_data.dataList.length){
			// 	this.Detailloading = true;
			// 	this.DetailStatus="noData";
			// };
			// this.Detailloading = false;
		}).catch(function (error){
			this.Detailloading = false;
	        this.DetailStatus="error";
		});
		axios.get('/api/trade/demand/getDetailMoers',{
			params: {
				id: this.$route.params.id
			}
		}).then(response => {
			this.demandMore = response.data.resp_data;
			this.demandMoreloading = false;
		});
   }
  },
  mounted() {
	this.getData()
  },
  watch:{
  	$route(to){
  		this.getData();
  	}
  },
  components: {
    Tab,
    TabItem,
    share,
    Loading
  }
}
</script>

<style>
@import url("../../../styles/common/trade/trade-common.css");
.detail-wrapper {
	width: 100%;
	background: #eee;
	height: auto;
}

.detail-wrapper .detail-img {
	width: 100%;
	height: 250px;
	background: none no-repeat scroll center center/cover rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid #eee;
}

.detail-wrapper .detali-ifo {
	padding: 10px;
	background: #fff;
}

.detail-wrapper .detali-ifo .ifo-line-one {
	display: flex;
}

.ifo-line-one .name {
	flex: 1;
}

.ifo-line-one .name .buy-title-icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(../../../static/trade-img/main_buy_icon.png) no-repeat center center/cover;
	background-size: 20px 20px;
	vertical-align: top;
	margin-top: 3px;
	margin-right: 2px;
}

.ifo-line-one .name .tittle {
	max-height: 50px;
	line-height: 25px;
	font-size: 18px;
	color: #333;
}

.ifo-line-one .share {
	flex: 0 0 30px;
	width: 30px;
	margin-left: 30px;
}

.ifo-line-one .share .share-icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(../../../static/trade-img/xiangqing-share.png) no-repeat center center/cover;
	background-size: 20px 20px;
	vertical-align: top;
}

.ifo-line-one .share span {
	display: inline-block;
	color: #888;
	font-size: 12px;
	line-height: 20px;
	margin-top: 3px;
}

.detail-wrapper .detali-ifo .ifo-line-two {
	display: flex;
	height: 25px;
	padding: 5px 0;
	line-height: 25px;
}

.ifo-line-two .price {
	flex: 0 0 60%;
	color: #ff782e;
}

.ifo-line-two .price .p-bt {
	color: #888;
}

.ifo-line-two .price big {
	font-size: 24px;
}

.ifo-line-two .price .unit-price {
	font-size: 16px;
}

.ifo-line-two .price .pre-date {
	font-size: 14px;
}

.ifo-line-two .price .mianyi {
	font-size: 18px;
}

.ifo-line-two .size {
	flex: 1;
	text-align: right;
	color: #ff782e;
	font-size: 14px;
}

.ifo-line-two .size span {
	color: #888;
}

.detail-wrapper .detali-ifo .ifo-line-three {
	display: flex;
	height: 25px;
	line-height: 25px;
	font-size: 14px;
	color: #888;
}

.ifo-line-three .foods-address {
	flex: 0 0 60%;
}

.foods-address .wl {
	color: #29ab91;
	font-size: 14px;
	margin-left: 3px;
}

.foods-address .wl .wl-car {
	display: inline-block;
	width: 16px;
	height: 14px;
	background: url(../../../static/trade-img/main_car.png) no-repeat center center/cover;
	background-size: 16px 14px;
	vertical-align: middle;
	margin: 0 2px;
}

.ifo-line-three .stone {
	flex: 1;
	text-align: right;
}

.ifo-line-three .stone label {
	color: #ff782e;
	font-size: 16px;
}

.detail-wrapper .detali-ifo .ifo-line-four {
	display: flex;
	height: 25px;
	line-height: 25px;
	font-size: 14px;
	color: #888;
	padding: 5px 0;
}

.ifo-line-four .ifo-report {
	flex: 0 0 50%;
}

.ifo-line-four .ifo-report .report-icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(../../../static/trade-img/xiangqing-jubao.png) no-repeat center center/cover;
	background-size: 20px 20px;
	vertical-align: top;
}

.report-done {
	color: red;
}

.report-done .report-icon-done {
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(../../../static/trade-img/xiangqing-jubao-done.png) no-repeat center center/cover;
	background-size: 20px 20px;
	vertical-align: top;
}

.ifo-line-four .read-time {
	flex:0 0 100px;
	width: 100px;
	margin-right: 5px;
	text-align: right;
}

.ifo-line-four .update-time {
	flex: 1;
	text-align: right;
}

.detail-wrapper .detali-foods-seller {
	padding: 10px;
	height: 50px;
	background: #fff;
	margin: 10px 0;
	display: flex;
	line-height: 50px;
}

.detali-foods-seller .seller-icon {
	flex: 0 0 50px;
	width: 50px;
	height: 50px;
	margin-right: 10px;
	background: none no-repeat scroll center center/cover rgba(0, 0, 0, 0.1);
	border-radius: 50%;
}

.detali-foods-seller .seller-icon img {
	width: 100%;
	border-radius: 50%;
}

.detali-foods-seller .seller-msg {
	flex: 1;
	overflow: hidden;
}

.detali-foods-seller .seller-msg .name {
	display: inline-block;
	max-width: 150px;
	vertical-align: middle;
	font-size: 16px;
	color: #333;
}

.detali-foods-seller .seller-shop {
	flex: 0 0 70px;
	width: 70px;
	margin-left: 10px;
	text-align: right;
	color: #888;
	font-size: 14px;
}

.detali-foods-seller .seller-shop a {
	color: #888;
}

.seller-shop .enter-icon {
	display: inline-block;
	width: 10px;
	height: 18px;
	background: url(../../../static/trade-img/more_icon.png) no-repeat center center/cover;
	background-size: 10px 18px;
	vertical-align: top;
	margin-top: 15px;
}

.tab-item {
	background: #fff;
	padding-bottom: 50px;
}

.vux-tab .vux-tab-item {
	font-size: 16px !important;
}

.vux-tab .vux-tab-item.vux-tab-selected {
	color: #008cf0 !important;
}

.vux-tab-ink-bar {
	background-color: #008cf0 !important;
}

.details-msg {
	padding: 0 10px;
	background: #fff;
}

.details-msg .main-wapper {
	display: flex;
	padding: 10px;
	line-height: 25px;
	font-size: 14px;
}

.main-wapper .msg-left {
	flex: 0 0 80px;
	color: #888;
}

.main-wapper .msg-right {
	flex: 1;
	margin-left: 15px;
	color: #333;
}

.main-wapper .msg-right .need-bq {
	display: inline-block;
	color: #008cf0;
	border: 1px solid #008cf0;
	font-size: 10px;
	padding: 0 8px;
	margin-right: 5px;
	line-height: 20px;
	border-radius: 10px;
	vertical-align: center;
	background: rgba(0, 140, 240, 0.1);
}

.detail-list-remand {
	padding: 10px 0;
}

.detail-list-remand .column {
	height: 30px;
	line-height: 26px;
	padding: 0 10px;
}

.detail-list-remand .column .column-icon {
	display: inline-block;
	width: 22px;
	height: 22px;
	background: url(../../../static/trade-img/detail-recommend.png) no-repeat center center/cover;
	background-size: 22px 22px;
	vertical-align: top;
	margin-top: 3px;
	margin-right: 2px;
}

.detail-list-remand .column span {
	font-size: 16px;
	color: #333;
}
.collection-status{width:30%;
	height:100px;
	background:rgba(0,0,0,0.5);
	position: fixed;
	top: 200px;
	left:35%;
	border-radius:10px;
	text-align: center;
	line-height:100px;
	font-size: 15px;
	color: #fff;
}
</style>
